import { memo, useEffect, useState } from 'react'
import Tabs from '@/components/Tabs'
import { useDispatch, useSelector } from 'react-redux'
import styles from './index.module.scss'
import { getUserChannels, getAllChannels } from './store/action'
import Channels from './components/Channels'
import { Drawer } from 'antd-mobile'
import Icon from '@/components/icon'
import ArticleList from './components/ArticleList'

export default memo(function Index() {
  const [showOpen, setShowOpen] = useState(false)

  const dispatch = useDispatch()

  const tabs = useSelector((state) => state.HomeReducer.channels)

  useEffect(() => {
    dispatch(getUserChannels())
    dispatch(getAllChannels())
  }, [dispatch])

  const [active, setactive] = useState(0)
  return (
    <div className={styles.root}>
      <Tabs tabs={tabs} index={active} onChange={(e) => setactive(e)}>
        {tabs.map((item) =>
          active === item.id ? (
            <ArticleList
              key={item.id}
              id={item.id}
              activeId={tabs[active].id}
            />
          ) : (
            <div key={item.id}></div>
          )
        )}
      </Tabs>
      <div className="tabs-opration">
        <Icon type="iconbtn_search" />
        <Icon type="iconbtn_channel" onClick={() => setShowOpen(true)} />
      </div>
      {showOpen && (
        <Drawer
          position="left"
          children={''}
          sidebar={
            <Channels
              userChannles={tabs}
              onClose={() => setShowOpen(false)}
              index={active}
              onChange={(i) => setactive(i)}
            />
          }
          className="my-drawer"
          open={showOpen}
        />
      )}
    </div>
  )
})
